//@ts-nocheck
import React from '../../react'
// import React from 'react'
import ReactDOM from '../../react-dom';
// import ReactDOM from 'react-dom';
class ScrollingList extends React.Component {
    wrapper
    timeID
    constructor(props) {
      super(props);
      this.state = { messages: [] }
      this.wrapper = React.createRef();
    }

    addMessage = () => {
      this.setState(state => ({
        messages: [`${state.messages.length}`, ...state.messages],
      }))
    }
    componentDidMount() {
      this.timeID = window.setInterval(() => {//设置定时器
        this.addMessage();
      }, 1000)
    }
    componentWillUnmount() {//清除定时器
      window.clearInterval(this.timeID);
    }
    getSnapshotBeforeUpdate = () => { //很关键的，我们获取当前rootNode的scrollHeight，传到componentDidUpdate 的参数perScrollHeight
      return this.wrapper.current.scrollHeight;
    }
    componentDidUpdate(pervProps, pervState, prevScrollHeight/** ←由getSnapshotBeforeUpdate返回值决定*/) {
      const curScrollTop = this.wrapper.current.scrollTop;//当前向上卷去的高度

      /** 以为内容在头顶不断增加,故最先的内容会往下沉,如果我们想最先的'一屏'不往下沉 就需要↓↓*/
      //当前向上卷去的高度加上增加的内容高度
      this.wrapper.current.scrollTop = curScrollTop + (this.wrapper.current.scrollHeight - prevScrollHeight);
    }
    render() {
      const style = {
        height: '100px',
        width: '200px',
        border: '1px solid red',
        overflow: 'auto'
      }
      return (
        <div style={style} ref={this.wrapper} >
          {this.state.messages.map((message, index) => (
            <div key={index}>{message}</div>
          ))}
        </div>
      );
    }
}

ReactDOM.render(
  <ScrollingList />,
  document.getElementById('root')
);
